Hey教你 | GeoHey SDK开发地图应用的那些小技巧（三）
文章 | 灰羽
编辑 | sshuair
刚刚过完春节，面对节后综合症和“每逢佳节胖三斤”的双重打击，懒散的吃瓜群众依然沉溺于吃吃吃不能自拔。但是，活儿就在那里，你不去做，活也会来找你。所以即便再想念那还没吃够的肉和甜点，笔者依然被同事拖出来按在电脑前，一顿胖揍后鼻青脸肿的继续码字……
咳咳，回归正题，让我们继续来看本期的3个实例。
1.如何使一个图层在不同比例尺下显示不同的要素？
在处理这个需求时，我们需要依赖对地图比例尺的变化这一事件的监听，因此首先添加对“ zoomEnd”事件的监听，参看下面的伪代码
var map,event;
map.bind("zoomEnd",event);
添加监听后，我们就要针对AB两种情况分别处理了，先看情况A。
在A中，由于不同比例尺下，显示的内容中没有重复的要素。因此可以选择以下两个方案：
A-1:每次比例尺变动后，需要改变内容时，清空图层并将新的内容添加进去
var map, graphicLayer;
var gList = [[a,b,c],[d,e,f]];
map.bind("zoomEnd",replaceElement);
var replaceElement = function(){
var res = map.getResolution();
if(res<20){
graphicLayer.clear();
for(var i=0;i<gList[0].length;i++){
var g = gList[0][i];
g.addTo(graphicLayer);
}
}
else(res>=20){
graphicLayer.clear();
for(var i=0;i<gList[1].length;i++){
var g = gList[1][i];
g.addTo(graphicLayer);
}
}
}
示例代码以比例尺20作为分段值，表示当地图处于小于20的比例尺，和大于等于20的比例尺，这两种情况下的不同表示。
但是，这种写法有一个问题，就是如果地图在缩放时，缩放前的比例尺和缩放后的比例尺中显示的内容，并没有变化，那也就不需要清空图层并重新添加要素，因此伪代码改进如下：
var map, graphicLayer;
var gList = [[a,b,c],[d,e,f]];
var oldRes;
map.bind("zoomStart",getOldRes);
map.bind("zoomEnd",replaceElement);
var getOldRes = function(){
var oldRes = map.getResolution();
}
var replaceElement = function(){
var res = map.getResolution();
if(res<20 && oldRes>=20){
graphicLayer.clear();
for(var i=0;i<gList[0].length;i++){
var g = gList[0][i];
g.addTo(graphicLayer);
}
}
else(res>=20 && oldRes <20){
graphicLayer.clear();
for(var i=0;i<gList[1].length;i++){
var g = gList[1][i];
g.addTo(graphicLayer);
}
}
else{
return;
}
}
这样改进后，在缩放后如果不需要进行图层内容的改动，就不会触发清空重绘的代码，大大减少了不需要的绘制压力。
此外，如果不是以比例尺，而是是缩放等级来进行显示内容断定的话，需要自己加入一个比例尺－缩放等级的对照表，并在事件中进行换算，才能实现本需求。
2.在问题1点基础上，如果显示的是数据上图做出来的可视化成果？
思路与显示要素时的方法没有太大区别，只需要在替换图层内容时，重新设定tileLayer的url即可，调用setUrl方法后，sdk会自动刷新tileLayer，需要再做别的工作了。伪代码如下：
var map, tileLayer;
var tileUrls = [urlA,urlB];
var oldRes;
map.bind("zoomStart",getOldRes);
map.bind("zoomEnd",replaceElement);
var getOldRes = function(){
var oldRes = map.getResolution();
}
var replaceElement = function(){
var res = map.getResolution();
if(res<20 && oldRes>=20){
tileLayer.setUrl(tileUrls[0])
}
else(res>=20 && oldRes <20){
tileLayer.setUrl(tileUrls[1])
}
else{
return;
}
}
3.在请求数据时，如果数据量过大，怎么获取全部数据？
通过GeoHery极海的在线平台请求数据时，每次请求返回的最大数据量是有一个上限的，1000个。但是对于地理大数据，不超过1000条的数据才是少数。当数据量较大时，一般情况下，我们推荐用户选择使用数据上图来显示数据，但是，如果是一定要获取的话，可以通过每次获取一个比1000小的长度，在请求时，请求比这个长度多1的大小，通过返回的数组长度与长度＋1的值进行比较，来判断是否还有剩余没有获取的数据，有的话。再通过偏移量来进行循环获取剩下的部分。以下是实现的伪代码：
var len = 800, offset = 0;
var gList = [];
var getData = function(offset){
$.ajax({
url: requestUrl,
type:get,
data:{
offset:offset,
limit:len+1
},
success:function(data){
if(data.code ==0){
if(data.data.length >= (len+1)){
//还有数据需要再次进行循环
for(var i=0;i<len;i++){
gList.push(data.data[i]);
}
offset = offset + len;
getData(offset);
}
else{
for(var i=0;i<data.data.length;i++){
gList.push(data.data[i]);
}
//所有数据获取完成
}
}else{
//出现错误
}
},
error: function(err){
//出现错误
}
});
}
$.ajax({
url:,
type:get,
data:
})
本期的3个实例就到此结束。从下一期开始，我们将会为大家带来GeoHey SDK与热门流行的前端框架的结合使用。在这个“框架遍地走，一望挑花眼”的时代，作为走在行业前沿的诸位观众老爷，在与前端技术的结合上，也要跟上脚步，引领潮流。
对我们的SDK在使用上有问题的同学，可以先访问我们的示例页面，在其中进行在线调试。如果依然有问题，也可以关注我们的公众号，或是加入我们的QQ交流群。
欢迎加入GeoHey技术支持QQ群：
164183186
GeoHey
地理位置服务领先者
让我们一起探索地理位置的价值
为这个世界创造一个使用地图的新方式
微博ID：GeoHey
微信服务号：geohey_com
访问网站 http://geohey.com
联系&合作邮箱：contact@geohey.com
长按识别二维码关注
点击“阅读原文”打开新页面